<template>
  <div style="width:100%;height:100%;position:relative;">
        <!--用transition 把切换组件页面的容器包含-->
    <div style="width:100%;height:calc(100% - 51px);">
          <router-view class="child-view"></router-view>
      </div>
      <div style="position:absolute;bottom:0px;width:100%;height:51px;">
      <el-tabs v-model="tabsActiveName" tab-position="bottom" :stretch=true type="card"  @tab-click="handleClick">
        <el-tab-pane label="首页" name="home"></el-tab-pane>
        <el-tab-pane label="分类" name="list"></el-tab-pane>
        <el-tab-pane label="购物车" name="cart"></el-tab-pane>
        <el-tab-pane label="个人中心" name="user"></el-tab-pane>
      </el-tabs>
      </div>
  </div>
</template>

<script>
import { ref,watch} from "vue";
import { useRouter,onBeforeRouteUpdate } from "vue-router";

//import VueEvent from '../event/event'
export default {
  name: "Index",
  setup() {
    const router = useRouter();
    //v-model="activeName"
    const tabsActiveName = ref("home");
    const handleClick = () => {
        //alert('handleClick:'+tabsActiveName.value);
        //使页面跳转
         if (tabsActiveName.value == 'home') {
           router.push({ name: "home" });
         }
      if (tabsActiveName.value == 'list') {
        router.push({ name: "list" });
      }
      if (tabsActiveName.value == 'cart') {
        router.push({ name: "cart" });
      }
      if (tabsActiveName.value == 'user') {
        router.push({ name: "info" });
      }
    };




    //根据当前的路由
    //设置tabbar上激活的是哪一项
    tabsActiveName.value = router.currentRoute.value.meta.top;


    watch(()=>router.currentRoute.value.meta.top,(newVal,oldVal)=>{
      console.log("监听到router变化");
      console.log(oldVal);
      console.log(newVal);
      tabsActiveName.value = newVal;
    });

    //返回
    return {
      handleClick,
      tabsActiveName,
    };
  },
}
</script>

<style scoped>

</style>
